<template>
    <div class="card">
      <!-- 上传图片按钮 -->
      <label class="upload-btn" for="file-upload">
        上传图片
        <input type="file" id="file-upload" name="file" accept="image/*" @change="handleFileChange" />
      </label>
  
      <!-- 图片展示区域 -->
      <div class="image-preview" id="image-preview">
        <img v-if="imageSrc" :src="imageSrc" alt="预览图片" />
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const imageSrc = ref(null); // 用于存储图片的 base64 编码
  
  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        imageSrc.value = e.target.result; // 将读取到的文件内容赋值给 imageSrc
      };
      reader.readAsDataURL(file);
    }
  };
  </script>
  
  <style scoped>
  /* 卡片样式 */
  .card {
    width: 300px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* 上传按钮样式 */
  .upload-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    outline: none;
    transition: background-color 0.3s ease;
  }
  
  .upload-btn:hover {
    background-color: #0056b3;
  }
  
  /* 隐藏原生input[type="file"] */
  .upload-btn input[type="file"] {
    display: none;
  }
  
  /* 图片展示区域样式 */
  .image-preview {
    margin-top: 20px;
    text-align: center;
  }
  
  .image-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
  }
  </style>